<template>
  <el-cascader
    v-model="ids"
    ref="areaCascader"
    :options="list"
    @change="changeArea"
    @expand-change="changeExpand"
    :props="props"
    clearable
    style="width: 100%"
  >
  </el-cascader>
</template>

<script>
export default {
    props:{
        value:{
            type: String,
        },
        label:{
            type: String,
        }
    },
    data(){
        return{
            ids: [],
            names: [],
            list:[],
            props:{
                value: 'id',
                label: 'name',
            }
        }
    },
    created(){
        this.getArea(1,0);
    },
    methods:{
        async init(value){
            this.ids = [];
            this.names = [];     
            if(value){
                let arr = value.split(',');
                await this.getArea(2,arr[0]);
                await this.getArea(3,arr[1]);
                this.ids = arr;
            }
            if(this.label){
                this.names = this.label.split('/')
            }        
        },
        getArea(level,id){
            return new Promise((resolve, reject) => {
                this.$request('get', '/admin/area/'+id, {}, (data,msg) => {
                    if(level == 1){
                        this.list = data.map(item => {
                            item.children = [];
                            return item;
                        });
                        // console.log(1)
                    }else if(level == 2){
                        this.list = this.list.map(item => {
                            if(item.id == id){
                            item.children = data.map(child => {
                                child.children = [];
                                return child;
                            });
                            }
                            return item;
                        });
                        // console.log(2)
                    }else if(level == 3){
                        this.list = this.list.map(item => {
                            if(item.hasOwnProperty('children') && item.children.length > 0){
                            item.children = item.children.map(child => {
                                if(child.id == id){
                                child.children = data;
                                }
                                return child;
                            });
                            }
                            return item;
                        });
                        // console.log(3);
                    }
                    this.$forceUpdate();
                    resolve();
                })
            })
        },
        changeArea(e){
            if(e.length == 0){
                this.ids = [];
                this.names = [];
            }else{
                let node = this.$refs.areaCascader.getCheckedNodes()[0];
                this.names = node.pathLabels;
                // console.log(node.path,node.pathLabels);
            }
            this.$emit('update:value', this.ids.join(','));
            this.$emit('update:label', this.names.join('/'));
        },
        changeExpand(e){
            let province = this.list.find(item => item.id == e[0]);
            if(e.length == 1){        
                if(province.children.length == 0){
                this.getArea(2,e[0]);
                }        
            }else if(e.length == 2){
                let city = province.children.find(item => item.id == e[1]);
                if(city.children.length == 0){
                this.getArea(3,e[1]);
                }        
            }
        },
    }
}
</script>

<style>
</style>